<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>我派发的</text>
		</view>
	</view>



	<view class="body">
		<view class="container">
			<view class="conatenm">
				<view class="input">
					<input type="text" placeholder="搜索任务名称" />
				</view>
				<view class="search">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/search.png" mode="">
					</image>
				</view>

				<view class="cartgory">
					<view v-for="(item, index) in data" :key="index"
						:class="{ active: currindex === index, one: currindex !== index }" @click="change(index)">
						{{ item.Text }}
					</view>
				</view>

			</view>
<scroll-view scroll-y="true" class="scroll-container">
	<view class="ds">
		<view class="coanten">
			<view class="heads">
				<view class="jjhjy">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/biji.png" mode=""></image>
				</view>
				<view class="time">
					2025-05-01 22:22:00
				</view>
				<view class="paifagere">
					派发给：个人
				</view>
				<view class="finish">
					已完成
				</view>
			</view>
			<view class="center">
				<view class="center-content">
					<view class="hgyt">
						<view class="one">接收人员：李强</view>
						<view class="two">任务名称：任务名称</view>
						<view class="three">任务内容：任务内容</view>
						<view class="four">任务时间:2025-05-01 至 2025-05-04</view>
					</view>
				</view>
			</view>
			<view class="deeatile" @click="Distributetoenterprisedetails">
				<view class="deatyuih">
					查看详情
				</view>
	
			</view>
		</view>
		
		
		
		
		
		
		
		<view class="coanten">
			<view class="heads">
				<view class="jjhjy">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/biji.png" mode=""></image>
				</view>
				<view class="time">
					2025-05-01 22:22:00
				</view>
				<view class="paifagere">
					派发给：企业
				</view>
				<view class="finish ingt">
					未完成
				</view>
			</view>
			<view class="center">
				<view class="center-content">
					<view class="hgyt">
						<view class="one">接收人员：李强</view>
						<view class="two">任务名称：任务名称</view>
						<view class="three">任务内容：任务内容</view>
						<view class="four">任务时间:2025-05-01 至 2025-05-04</view>
					</view>
				</view>
			</view>
			<!-- <view class="deeatile">
				<view class="deatyuih">
					查看详情
				</view>
		
			</view> -->
		</view>
		
		
	</view>
	
</scroll-view>
			
			
			
			<!-- 
			<view class="ds">
				<view class="coanten">
					<view class="heads">
						<view class="jjhjy">
							<image src="/static/biji.png" mode=""></image>
						</view>
						<view class="time">
							2025-05-01 22:22:00
						</view>
						<view class="paifagere">
							派发给：企业
						</view>
						<view class="finish">
							已完成
						</view>
					</view>
					<view class="center">
						<view class="center-content">
							<view class="hgyt">
								<view class="one">接收人员：李强</view>
								<view class="two">任务名称：任务名称</view>
								<view class="three">任务内容：任务内容</view>
								<view class="four">任务时间:2025-05-01 至 2025-05-04</view>
							</view>
						</view>
					</view>
					<view class="deeatile">
						<view class="deatyuih">
							查看详情
						</view>
			
					</view>
				</view>
			</view>
			 -->
			


		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';

	function back() {
		uni.navigateBack({
			delta: 1
		})
	}

	const data = ref([{
			Text: "全部"
		},
		{
			Text: "未完成"
		},
		{
			Text: "已完成"
		}
	])
	var currindex = ref(0)

	function change(index) {
		currindex.value = index;
		console.log(index);
	}
	function Distributetoenterprisedetails (){
		uni.navigateTo({
			url:"/homePageOther/Distributetoenterprisedetails/Distributetoenterprisedetails"
		})
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100%;
		background-color: #f3f5f7;

		.container {
			width: 749rpx;
			height: 231rpx;
			background-color: #ffffff;

			.conatenm {
				width: 749rpx;
				height: 231rpx;
				position: relative;

				.input {
					width: 690rpx;
					height: 75rpx;
					background: #F6F8F9;
					border-radius: 38rpx;
					position: absolute;
					top: 31rpx;
					left: 29rpx;

					input {
						width: 690rpx;
						height: 75rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 25rpx;
						text-indent: 30rpx;
						color: #ABABBB;
					}
				}

				.search {
					width: 30rpx;
					height: 31rpx;
					position: absolute;
					right: 70rpx;
					top: 55rpx;

					image {
						width: 30rpx;
						height: 31rpx;
					}
				}
			}
		}
	}

	.cartgory {
		width: 690rpx;
		height: 75rpx;
		position: absolute;
		bottom: 31rpx;
		left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.one {
			width: 123rpx;
			height: 65rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #5F666E;
			line-height: 65rpx;
			text-align: center;

		}

		.active {
			width: 123rpx;
			height: 65rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #5F666E;
			line-height: 65rpx;
			background: #DFEDFF;
			font-weight: bold;
			font-size: 28rpx;
			color: #0874FA;
			text-align: center;
			border-radius: 32rpx;

		}
	}
.scroll-container {
  height: calc(100vh - 142rpx - 231rpx); /* 头部高度 + 搜索区域高度 */
  overflow: auto;
}

	.ds {
		width: 690rpx;
		height: 435rpx;
		background: #ffffff;
		border-radius: 14rpx;
		margin: 29rpx auto;
        // margin-top: 20rpx;
		.coanten {
			width: 690rpx;
			// height: 435rpx;
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
             border-radius: 21rpx;
			.heads {
				width: 690rpx;
				height: 104rpx;
				position: relative;
				// background-color: #ffffff;

				.jjhjy {
					width: 104rpx;
					height: 104rpx;
					position: absolute;
					top: 27rpx;
					left: 29rpx;

					image {
						width: 104rpx;
						height: 104rpx;
					}
				}

				.time {
					width: 238rpx;
					height: 19rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #C1C1C1;
					line-height: 33rpx;
					position: absolute;
					top: 39rpx;
					left: 151rpx;
				}

				.paifagere {
					width: 174rpx;
					height: 27rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 29rpx;
					color: #000000;
					line-height: 33rpx;
					position: absolute;
					top: 80rpx;
					left: 150rpx;
				}
				.finish {
					width: 105rpx;
					height: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #0874FA;
					line-height: 28rpx;
					position: absolute;
					top: 61rpx;
					right: 38rpx;
				}
             .ingt{
				 width: 105rpx;
				 height: 28rpx;
				 font-family: Source Han Sans CN;
				 font-weight: 400;
				 font-size: 30rpx;
				 color: #FA0808  ;
				 line-height: 28rpx;
				 position: absolute;
				 top: 61rpx;
				 right: 38rpx;
			 }
				
			}

			.center {
				width: 690rpx;
				height:320rpx;
				margin-top: 20rpx;
				// background-color: #000000;
				position: relative;

				.center-content {
					width: 552rpx;
					height: 298rpx;
					border-radius: 21rpx;
					position: absolute;
					left: 120rpx;
					top: 10rpx;

					.hgyt {
						width: 552rpx;
						height:300rpx;
						background: #EEF6FF;
						border-radius: 21rpx;
						position: relative;

						.one {
							width: 200rpx;
							height: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 26rpx;
							position: absolute;
							top: 36rpx;
							left: 27rpx;
						}

						.two {
							width: 260rpx;
							height: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 26rpx;
							position: absolute;
							top: 97rpx;
							left: 27rpx;
						}

						.three {
							width: 260rpx;
							height: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 26rpx;
							position: absolute;
							top: 159rpx;
							left: 27rpx;
						}

						.four {
							width: 490rpx;
							height: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 26rpx;
							position: absolute;
							bottom: 48rpx;
							left: 27rpx;
						}
					}
				}
			}

			.deeatile {
				width: 690rpx;
				height: 100rpx;
				// background: red;
				position: relative;
				.deatyuih {
					width: 196rpx;
					height: 73rpx;
					background: #0874FA;
					border-radius: 37rpx;
					border-radius: 37rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 33rpx;
					color: #FFFFFF;
					text-align: center;
					margin-bottom: 21rpx;
					line-height: 73rpx;
					position: absolute;
				   right: 47rpx;
				   top: 16rpx;
				}
			}
		}


	}

	// .sb {
	// 	margin-top: 30rpx;
	// 	width: 690rpx;
	// 	height: 435rpx;
	// 	background: #ffffff;
	// 	border-radius: 14rpx;
	// 	margin: 29rpx auto;
	
	// 	.coanten {
	// 		width: 690rpx;
	// 		// height: 435rpx;
	// 		background-color: #FFFFFF;
	//          border-radius: 21rpx;
	// 		.heads {
	// 			width: 690rpx;
	// 			height: 104rpx;
	// 			position: relative;
	// 			// background-color: #ffffff;
	
	// 			.jjhjy {
	// 				width: 104rpx;
	// 				height: 104rpx;
	// 				position: absolute;
	// 				top: 27rpx;
	// 				left: 29rpx;
	
	// 				image {
	// 					width: 104rpx;
	// 					height: 104rpx;
	// 				}
	// 			}
	
	// 			.time {
	// 				width: 238rpx;
	// 				height: 19rpx;
	// 				font-family: Source Han Sans CN;
	// 				font-weight: 400;
	// 				font-size: 24rpx;
	// 				color: #C1C1C1;
	// 				line-height: 33rpx;
	// 				position: absolute;
	// 				top: 39rpx;
	// 				left: 151rpx;
	// 			}
	
	// 			.paifagere {
	// 				width: 174rpx;
	// 				height: 27rpx;
	// 				font-family: Source Han Sans CN;
	// 				font-weight: 500;
	// 				font-size: 29rpx;
	// 				color: #000000;
	// 				line-height: 33rpx;
	// 				position: absolute;
	// 				top: 80rpx;
	// 				left: 150rpx;
	// 			}
	
	// 			.finish {
	// 				width: 105rpx;
	// 				height: 28rpx;
	// 				font-family: Source Han Sans CN;
	// 				font-weight: 400;
	// 				font-size: 30rpx;
	// 				color: #0874FA;
	// 				line-height: 28rpx;
	// 				position: absolute;
	// 				top: 61rpx;
	// 				right: 38rpx;
	// 			}
	// 		}
	
	// 		.center {
	// 			width: 690rpx;
	// 			height: 298rpx;
	// 			margin-top: 20rpx;
	// 			// background-color: #000000;
	// 			position: relative;
	
	// 			.center-content {
	// 				width: 552rpx;
	// 				height: 298rpx;
	// 				border-radius: 21rpx;
	// 				position: absolute;
	// 				left: 120rpx;
	// 				top: 10rpx;
	
	// 				.hgyt {
	// 					width: 552rpx;
	// 					height: 298rpx;
	// 					background: #EEF6FF;
	// 					border-radius: 21rpx;
	// 					position: relative;
	
	// 					.one {
	// 						width: 200rpx;
	// 						height: 26rpx;
	// 						font-family: Source Han Sans CN;
	// 						font-weight: 400;
	// 						font-size: 28rpx;
	// 						color: #666666;
	// 						line-height: 26rpx;
	// 						position: absolute;
	// 						top: 36rpx;
	// 						left: 27rpx;
	// 					}
	
	// 					.two {
	// 						width: 260rpx;
	// 						height: 26rpx;
	// 						font-family: Source Han Sans CN;
	// 						font-weight: 400;
	// 						font-size: 28rpx;
	// 						color: #666666;
	// 						line-height: 26rpx;
	// 						position: absolute;
	// 						top: 97rpx;
	// 						left: 27rpx;
	// 					}
	
	// 					.three {
	// 						width: 260rpx;
	// 						height: 26rpx;
	// 						font-family: Source Han Sans CN;
	// 						font-weight: 400;
	// 						font-size: 28rpx;
	// 						color: #666666;
	// 						line-height: 26rpx;
	// 						position: absolute;
	// 						top: 159rpx;
	// 						left: 27rpx;
	// 					}
	
	// 					.four {
	// 						width: 490rpx;
	// 						height: 26rpx;
	// 						font-family: Source Han Sans CN;
	// 						font-weight: 400;
	// 						font-size: 28rpx;
	// 						color: #666666;
	// 						line-height: 26rpx;
	// 						position: absolute;
	// 						bottom: 48rpx;
	// 						left: 27rpx;
	// 					}
	// 				}
	// 			}
	// 		}
	
	// 		.deeatile {
	// 			width: 690rpx;
	// 			height: 100rpx;
	// 			// background: red;
	// 			position: relative;
	// 			.deatyuih {
	// 				width: 196rpx;
	// 				height: 73rpx;
	// 				background: #0874FA;
	// 				border-radius: 37rpx;
	// 				border-radius: 37rpx;
	// 				font-family: Source Han Sans CN;
	// 				font-weight: 400;
	// 				font-size: 33rpx;
	// 				color: #FFFFFF;
	// 				text-align: center;
	// 				margin-bottom: 21rpx;
	// 				line-height: 73rpx;
	// 				position: absolute;
	// 			   right: 47rpx;
	// 			   top: 16rpx;
	// 			}
	// 		}
	// 	}
	
	
	// }
	
</style>